<template>
  <div id="ShopIndex">
    <ShopIndexNav @ChangeType="ChangeType" />
    <ShopIndexBanner
      v-if="TabStatusStatus"
      :shopid="ShopID"
    />
    <!-- 首页 -->
    <div v-if="PagerName === '首页'">
      <ShopIndexClass />
      <div
        v-for="l in list"
        :key="l.type"
      >
        <!-- Top单品 -->
        <TopList
          v-if="l.type == 4"
          :data="l"
          :shopid="ShopID"
        />
        <!-- 优惠券 -->
        <Coupons
          v-if="l.type == 8"
          :data="l"
        />
        <!-- 今日优选 -->
        <Today
          v-if="l.type == 1"
          :data="l"
          :shopid="ShopID"
        />
      </div>
      <!-- 热门专题 -->
      <!-- <TopicList
        :topiclistdata="topicListData"
        :shopid="ShopID"
      /> -->
      <ShopindexLike
        ref="ShopindexLikeRefs"
        :shopid="ShopID"
      />
    </div>
    <!-- 首页END -->
    <!-- 活动 -->
    <div v-else-if="PagerName === '活动'">
      <ActivityFloor
        ref="ActivityFloorRefs"  
        :shopid="ShopID" 
        @TabStatus="TabStatus"
      />
      <div v-show="TabStatusStatus">
        <ActivityLike
          ref="ActivityLikeRefs"
          :shopid="ShopID"
        />
      </div>
    </div>
    <!-- 活动END -->
    <!-- 热销 -->
    <div v-else-if="PagerName === '热销'">
      <!-- 热销 ---分类，地区，排序，搜索 -->
      <SellCakesTop
        ref="SellCakesTopRefs"
        :shopid="ShopID"
        @RefreshHotList="RefreshHotList"
      />
      <!-- <SellCakesList
        ref="SellCakesListRefs" 
        :shopid="ShopID"
      /> -->
      <div class="like">
        <div class="goods-list">
          <div
            v-for="(item, index) in SmallSellCakesListLikeList"
            :key="index"
            class="goods-item"
            @click.stop="todetail(item.goods)"
          >
            <div class="goods-img">
              <img
                :src="item.goods.defaultAlbum"
                alt=""
              >
            </div>
            <div class="goods-info">
              <div class="goods-info-left">
                <div class="name">
                  {{ item.goods.cProductShowName }}
                </div>
                <div class="price_box">
                  <div class="price">
                    ￥{{ item.goods.fSalePrice }}
                  </div>
                  <div class="text">
                    已有{{ item.goods.iSales }}人付款
                  </div>
                </div>
              </div>
              <div class="goods-info-right">
                <img
                  class="item_img"
                  :src="item.FocusStatus? guanzhu : notguanzhu"
                  @click.stop="focus(item)"
                >
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          v-if="SellCakesListLastPage > SellCakesListPage"
          class="more"
          @click="SellCakesListLastMore"
        >
          点击加载更多+
        </div>
        <div
          v-else
          class="more"
        >
          没有更多
        </div> -->
      </div>
    </div>
    <!-- 热销END -->
    <!-- 新品 -->
    <div v-else-if="PagerName === '新品'">
      <!-- 新品 ---分类，地区，排序，搜索 -->
      <NewGoodsTop
        ref="SellCakesTopRefs"
        :shopid="ShopID"
        @RefreshHotList="RefreshHotList"
      />
      <div class="like">
        <div class="goods-list">
          <div
            v-for="(item, index) in NewGoodsListData"
            :key="index"
            class="goods-item"
          >
            <div 
              class="goods-img"
              @click.stop="todetail(item.goods)"
            >
              <img
                :src="item.goods.defaultAlbum"
                alt=""
              >
            </div>
            <div class="goods-info">
              <div class="goods-info-left">
                <div class="name">
                  {{ item.goods.cProductShowName }}
                </div>
                <div class="price_box">
                  <div class="price">
                    ￥{{ item.goods.fSalePrice }}
                  </div>
                  <div class="text">
                    已有{{ item.goods.iSales }}人付款
                  </div>
                </div>
              </div>
              <div class="goods-info-right">
                <img
                  class="item_img"
                  :src="item.FocusStatus? guanzhu : notguanzhu"
                  @click.stop="focus(item)"
                >
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          v-if="AllNewGoodsListPage > NewGoodsListPage"
          class="more"
          @click="SellCakesListLastMore"
        >
          点击加载更多+
        </div>
        <div
          v-else
          class="more"
        >
          没有更多
        </div> -->
      </div>
    </div>
    <!-- 新品END -->
    <!-- 商品 -->
    <div v-else-if="PagerName === '商品'">
      <GoodsTop
        ref="SellCakesTopRefs"
        :shopid="ShopID"
        @GoodsTopList="GoodsTopList"
      />
      <div class="like">
        <div class="goods-list">
          <div
            v-for="(item, index) in GoodsListData"
            :key="index"
            class="goods-item"
          >
            <div 
              class="goods-img"
              @click.stop="todetail(item)"
            >
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div class="goods-info">
              <div class="goods-info-left">
                <div class="name">
                  {{ item.cProductShowName }}
                </div>
                <div class="price_box">
                  <div class="price">
                    ￥{{ item.fSalePrice }}
                  </div>
                  <div class="text">
                    已有{{ item.iSales }}人付款
                  </div>
                </div>
              </div>
              <div class="goods-info-right">
                <img
                  class="item_img"
                  :src="item.FocusStatus? guanzhu : notguanzhu"
                  @click.stop="focus(item)"
                >
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          v-if="AllGoodsListPage > GoodsListPage"
          class="more"
          @click="SellCakesListLastMore"
        >
          点击加载更多+
        </div>
        <div
          v-else
          class="more"
        >
          没有更多
        </div> -->
      </div>
    </div>
    <!-- 商品END -->
  </div>
</template>

<script>
import ShopIndexNav from "@/components/shopindex/ShopIndexNav"; // banner下自营log
import ShopIndexBanner from "@/components/shopindex/ShopIndexBanner"; // 店铺首页BANNER
import ShopIndexClass from "@/components/shopindex/ShopIndexClass"; // 首页导航
import TopList from "@/components/shopindex/TopList"; // top单品
import Coupons from "@/components/shopindex/Coupons"; // 优惠券
import ShopindexLike from "@/components/common/ShopindexLike.vue"; // 猜你喜欢(店铺首页)
import ActivityLike from '@/components/common/ActivityLike.vue'; // 活动猜你喜欢
import Today from "@/components/shopindex/Today"; // 今日优选
import TopicList from "@/components/shopindex/TopicList.vue"; // 热门专题
import ActivityFloor from "@/components/shopindex/ActivityFloor.vue"; // 活动楼层
import SellCakesTop from "@/components/shopindex/SellCakesTop.vue"; // 热销顶部
import NewGoodsTop from "@/components/shopindex/NewGoodsTop.vue"; // 新品顶部
import GoodsTop from "@/components/shopindex/GoodsTop.vue"; // 商品顶部
import guanzhu  from '../../assets/img/zan_selected.png'; // 已关注
import notguanzhu  from '../../assets/img/zan.png'; // 未关注
// import SellCakesList from "@/components/shopindex/SellCakesList.vue"; // 热销商品列表

export default {
  components: {
    ShopIndexNav, // banner下自营log
    ShopIndexBanner, // 店铺首页BANNER
    TopList, // top单品
    Coupons, // 优惠券
    ShopindexLike, // 首页才猜你喜欢
    ActivityLike,// 活动猜你喜欢
    Today, // 今日优选
    TopicList, // 热门专题
    ShopIndexClass, // 首页导航
    ActivityFloor, // 活动楼层
    SellCakesTop, // 热销顶部
    NewGoodsTop, // 新品顶部
    GoodsTop, // 商品顶部
    // SellCakesList, // 热销商品列表
  },
  data() {
    return {
      notguanzhu:notguanzhu, // 未关注
			guanzhu:guanzhu, // 已关注
      PagerName: "首页",
      list: [], // 首页模块
      topicListData: [], // 热门专题
      ShopID: "", // 店铺id
      HotList: [], // 热销商品列表
      SmallSellCakesListLikeList: [], // 热销用于分页合并数据
      SellCakesListPage: 1, // 热销初始页
      page: 1,
      SellCakesListLastPage: 1, // 热销总页数
      NewGoodsListPage: 1, // 新品初始页
      AllNewGoodsListPage: 1, // 新品总页数
      NewGoodsListData: [], // 新品用于分页合并数据
      GoodsListPage: 1, // 商品初始页
      GoodsListData: [], // 商品数据
      AllGoodsListPage: 1, // 商品总页数
      ScreeningObj: {
        // 筛选条件
        classifyId: "", // 分类，
        regionId: "", // 地区，
        areaId: "", // 排序，
        keywords: "", // 搜索
        PriceSorting: 0, // 价格排序
      },
      TabStatusStatus: true,
    };
  },
  
  mounted() {
    console.log(this.$route.query.id)
	sessionStorage.setItem("ShopID",this.$route.query.id)
    this.ShopID = this.$route.query.id; // 获取店铺id
    this.GetListData(this.$route.query.id); // 模块ShopIndex
    this.getTopicListData(this.$route.query.id); // 获取热门专题
    if(this.PagerName === "首页") {
      this.$refs.ShopindexLikeRefs.UpList(); // 店铺猜你喜欢
      this.$refs.ShopindexLikeRefs.getData(this.$route.query.id); // 店铺首页猜你喜欢
    }
  },
  methods: {
    TabStatus(TabStatus) {
      this.TabStatusStatus = TabStatus
    },
    // 获取导航切换值
    ChangeType(ChangeType) {
      console.log("获取导航id", ChangeType, this.$route.query.id);
      this.PagerName = ChangeType.name;
	  
	  if(this.PagerName !== "活动"){
		  this.TabStatusStatus = true
	  }
      if (this.PagerName === "热销") {
        this.SellCakesListPage = 1 // 热销初始页
        this.SmallSellCakesListLikeList = []
        this.getSellCakesList(this.$route.query.id) // 获取热销列表
      } else if(this.PagerName === "首页") {
        this.$refs.ShopindexLikeRefs.UpList(); // 店铺猜你喜欢
        this.$refs.ShopindexLikeRefs.getData(this.$route.query.id); // 店铺首页猜你喜欢
      } else if(this.PagerName === "活动") {
        this.$refs.ActivityFloorRefs.UpList() // 活动页面
        this.$refs.ActivityLikeRefs.UpList(); // 店铺活动猜你喜欢
        this.$refs.ActivityLikeRefs.getData(this.$route.query.id); // 店铺活动猜你喜欢
      } else if(this.PagerName === "新品") {
        this.NewGoodsListPage = 1 // 新品初始页
        this.NewGoodsListData = []
        this.getNewGoodsList(this.$route.query.id) // 获取新品列表
      } else if(this.PagerName === "商品") {
        this.GoodsListPage = 1 // 商品初始页
        this.GoodsListData = []
        this.GoodsTopList() // 获取商品列表
      }
    },
    // 获取个人收藏列表
    getProductFavorites(datalist) {
      let params = {
        token: localStorage.getItem('token'),
        data: {
          classId: '',
          productName: '',
          tagId: '',
          currentPage: 1,
          pagesize: 10000,
        }
      }
      this.$api.person.getProductFavorites(params).then(res => {
        this.FavorList = res.data.pager.data
        console.log('数据列表', datalist)
        this.SearchFavorites(this.FavorList, datalist)
      })
    },
    // 查询该商品是否被关注
    /**
     * FavorList 关注列表
     * LikeList 商品信息列表
     */
    SearchFavorites(FavorList,LikeList) {
      console.log('猜你喜欢关注列表', FavorList, LikeList)
      LikeList.forEach(element => {
        console.log('element.goods.pid', element.pid)
        let results = FavorList.map(a => a.pid).indexOf(element.goods===undefined?element.pid:element.goods.pid)
        if(results === -1) {
          this.$set(element, 'FocusStatus', false)
        } else {
          this.$set(element, 'FocusStatus', true)
        }
      })
    },

    // 关注
    focus(focus) {
      console.log('关注', focus)
      if(focus.FocusStatus) {
        let del = {
          token: localStorage.getItem('token'),
          data: {
            productId: focus.goods ===undefined?focus.pid:focus.goods.pid
          }
        }
        this.$api.good.delFavoritesByProductId(del).then(res => {
          if (res.code == 200) {
            if (this.PagerName === "热销") {
              this.SellCakesListPage = 1 // 热销初始页
              this.SmallSellCakesListLikeList = []
              this.getSellCakesList(this.$route.query.id) // 获取热销列表
            } else if(this.PagerName === "新品") {
              this.NewGoodsListPage = 1 // 新品初始页
              this.NewGoodsListData = []
              this.getNewGoodsList(this.$route.query.id) // 获取新品列表
            } else if(this.PagerName === "商品") {
              this.GoodsListPage = 1 // 商品初始页
              this.GoodsListData = []
              this.GoodsTopList() // 获取商品列表
            }
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        let params = {
          token: localStorage.getItem('token'),
          data: {
            iShopIds: focus.shop_id ===undefined?focus.shop.id:focus.shop_id,
            ids: focus.goods ===undefined?focus.pid:focus.goods.pid
          }
        }
        this.$api.good.addToCollect(params).then(res => {
         if (res.code == 200) {
            if (this.PagerName === "热销") {
              this.SellCakesListPage = 1 // 热销初始页
              this.SmallSellCakesListLikeList = []
              this.getSellCakesList(this.$route.query.id) // 获取热销列表
            } else if(this.PagerName === "新品") {
              this.NewGoodsListPage = 1 // 新品初始页
              this.NewGoodsListData = []
              this.getNewGoodsList(this.$route.query.id) // 获取新品列表
            } else if(this.PagerName === "商品") {
              this.GoodsListPage = 1 // 商品初始页
              this.GoodsListData = []
              this.GoodsTopList() // 获取商品列表
            }
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
    // 模块ShopIndex
    GetListData(shop_id) {
      let params = {
        shop_id: shop_id,
      };
      this.$api.commit.ShopIndex(params).then((res) => {
        if (res.code == 1) {
          console.log("模块", res.data);
          this.list = res.data;
        }
      });
    },
    // 获取热门专题
    getTopicListData(shopid) {
      let param = {
        shop_id: shopid,
        page: 1,
        limit: 2,
      };
      this.$api.home.topic(param).then((res) => {
        if (res.code == 1) {
          console.log("获取热门专题", res.data.data);
          this.topicListData = res.data.data;
        }
      });
    },

    //获取热销列表
    getSellCakesList(shop_id) {
      let params = {
        limit: 1000,
        page: this.SellCakesListPage,
        shop_id: shop_id
      }
      this.$api.commit.GetShopHotGoods(params).then(res =>{
        console.log('获取热销列表', res.data.data)
        this.SmallSellCakesListLikeList = res.data.data; // 获取符合要求的商品id
        this.GetGoodsShowData('','','','', 0, this.SmallSellCakesListLikeList) // 获取符合要求的商品详情
      })
    },
    // 获取新品列表
    getNewGoodsList(shop_id) {
      let params = {
        limit: 1000,
        page: this.SellCakesListPage,
        shop_id: shop_id
      }
      this.$api.commit.GetShopNewGoods(params).then(res =>{
        console.log('获取新品列表', res.data.data)
        this.NewGoodsListData = res.data.data; // 获取符合要求的商品id
        this.GetGoodsShowData('','','','', 0, this.NewGoodsListData) // 获取符合要求的商品详情
      })
    },
    // 热销更多
    SellCakesListLastMore() {
      if(this.PagerName === "活动") {
        this.SellCakesListPage++
        this.getSellCakesList(this.$route.query.id) // 获取热销列表
      } else if(this.PagerName === "新品") {
        this.NewGoodsListPage++
        this.getNewGoodsList(this.$route.query.id) // 获取新品列表
      } else if(this.PagerName === "商品") {
        this.GoodsListPage++
        this.GoodsTopList() // 获取商品列表
      }
    },
    // 获取商品详情
    /**
     * regionId: '', // 地区id
     * classifyId: "", // 分类
     * areaId: "", // 排序
     * keywords: "", // 搜索
     * arrdata：[], // 分页后的数据
     * PriceSorting: 0, // // 价格排序，1 从低到高，2 从高到低 
     */
    GetGoodsShowData(areaId, classifyId, regionId, keywords, PriceSorting, arrdata) {
      console.log('搜索条件',areaId, classifyId, regionId, keywords,PriceSorting, arrdata)
      let NewArrData = [] // 处理结束数组
      let orders = [] // 排序数组 
      let classifyIdType = '' // 分类id
      if(classifyId === 0) {
        classifyIdType = ""
      } else {
        classifyIdType = classifyId
      }
      let regionIdType = ''
      if(classifyId === 0) {
        regionIdType = ''
      } else {
        regionIdType = regionId
      }
      let DIRECTIONType = {
        fieldname: '',
        direction: ''
      }
      // 判断排序方式
      if (areaId === '') { // 初次加载时
        DIRECTIONType = {
          fieldname: 'iOrder',
          direction: 'asc'
        }
        orders.push(DIRECTIONType)
      } else if(areaId === 'iOrder') { // 默认方式
        DIRECTIONType = {
          fieldname: 'iOrder',
          direction: 'asc'
        }
        orders.push(DIRECTIONType)
      } else if(areaId === 'fSalePrice') {
        if(PriceSorting === 0) { // 如果为0，则默认排序
          DIRECTIONType = {
            fieldname: 'iOrder',
            direction: 'asc'
          }
          orders.push(DIRECTIONType)
        } else if(PriceSorting === 1)  { // 为1则升序
          DIRECTIONType = {
            fieldname: 'fSalePrice',
            direction: 'asc'
          }
          orders.push(DIRECTIONType)
        } else if(PriceSorting === 2) { // 为2则为降序
          DIRECTIONType = {
            fieldname: 'fSalePrice',
            direction: 'desc'
          }
          orders.push(DIRECTIONType)
        }
      }
      arrdata.forEach(element => {
        console.log('asasas')
        let goodData = {
          queryCondition: {
            order: orders,  // 排序方式
            pageindex: 1,
            pagesize: 10000,
            where: [
              {
                fieldname: "categoryid", // 商品分类id
                valuefrom: classifyIdType,
              },
              {
                fieldname: "area_id", // 区域id
                valuefrom: regionIdType,
              },
              {
                fieldname: "keyword", // 搜索关键词
                valuefrom: keywords,
              },
              {
                fieldname: "goods_id", // 商品id
                valuefrom: element.goods_id,
              },
            ],
          },
        }
        this.$api.commit.GetProductList(goodData).then(res => {
          if(res.data.data.length > 0) {
            element.goods = res.data.data[0]
            element.fSalePrice = res.data.data[0].fSalePrice
            NewArrData.push(element)
            if(areaId === 'fSalePrice') {
              if(PriceSorting === 0) { // 如果为0，则默认排序
               if(this.PagerName === "热销") {
                  this.SmallSellCakesListLikeList = NewArrData
                } else if(this.PagerName === "新品") {
                  this.NewGoodsListData = NewArrData
                }
                this.getProductFavorites(NewArrData)
              } else if(PriceSorting === 1)  { // 为1则升序
                if(this.PagerName === "热销") {
                  this.SmallSellCakesListLikeList = NewArrData.sort(this.Compare('fSalePrice'))
                } else if(this.PagerName === "新品") {
                  this.NewGoodsListData = NewArrData.sort(this.Compare('fSalePrice'))
                }
                this.getProductFavorites(NewArrData)
              } else if(PriceSorting === 2) { // 为2则为降序
                if(this.PagerName === "热销") {
                  this.SmallSellCakesListLikeList = NewArrData.sort(this.UnCompare('fSalePrice'))
                } else if(this.PagerName === "新品") {
                  this.NewGoodsListData = NewArrData.sort(this.UnCompare('fSalePrice'))
                }
                this.getProductFavorites(NewArrData)
              }
            } else {
              if(this.PagerName === "热销") {
                this.SmallSellCakesListLikeList = NewArrData
              } else if(this.PagerName === "新品") {
                this.NewGoodsListData = NewArrData
              }
              this.getProductFavorites(NewArrData)
            }
          } else {
            console.log('未找到相关数据')
            if(this.PagerName === "热销") {
              this.SmallSellCakesListLikeList = NewArrData
            } else if(this.PagerName === "新品") {
              this.NewGoodsListData = NewArrData
            }
            this.getProductFavorites(NewArrData)
          }
        })
      })
    },
    // 价格升序排序
    Compare(property){
      return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
      }
    },
    // 价格降序排序
    UnCompare(property){
      return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value2 - value1;
      }
    },
    // 热销---分类，地区，排序，搜索组件值
    /*
     * classifyId, 分类
     * regionId, 地区
     * areaId, 排序
     * keywords 搜索
     * PriceSorting:0 , 价格排序
     */
    // areaId, classifyId, regionId, keywords, arrdata
    RefreshHotList(classifyId, regionId, areaId, keywords, PriceSorting) {
      this.ScreeningObj = {
        classifyId: classifyId,
        regionId: regionId,
        areaId: areaId,
        keywords: keywords,
        PriceSorting: PriceSorting,
      };
      console.log("筛选", this.ScreeningObj)
      this.SmallSellCakesListLikeList =  [] // 热销用于分页合并数据
      this.NewGoodsListData = [] // 新品用于分类
      if (this.PagerName === "热销") {
        this.SellCakesListPage = 1 // 热销初始页
        let params = {
          limit: 1000,
          page: this.SellCakesListPage,
          shop_id: this.$route.query.id
        }
        this.$api.commit.GetShopHotGoods(params).then(res =>{ // 获取热销
          console.log('获取热销列表', res.data.data)
          this.SellCakesListLastPage = res.data.last_page
          this.SmallSellCakesListLikeList = res.data.data // 获取符合要求的商品id
          this.GetGoodsShowData(this.ScreeningObj.areaId,this.ScreeningObj.classifyId,this.ScreeningObj.regionId,this.ScreeningObj.keywords,this.ScreeningObj.PriceSorting, this.SmallSellCakesListLikeList)
          this.getProductFavorites(this.SmallSellCakesListLikeList)
        })
      } else if (this.PagerName === "新品") {
        this.NewGoodsListPage = 1 // 新品初始页
        let params = {
          limit: 1000,
          page: this.NewGoodsListPage,
          shop_id: this.$route.query.id
        }
        this.$api.commit.GetShopNewGoods(params).then(res =>{ // 获取新品
          console.log('获取新品列表', res.data.data)
          this.NewGoodsListData = res.data.data; // 获取符合要求的商品id
          this.GetGoodsShowData(this.ScreeningObj.areaId,this.ScreeningObj.classifyId,this.ScreeningObj.regionId,this.ScreeningObj.keywords,this.ScreeningObj.PriceSorting, this.NewGoodsListData)
          this.getProductFavorites(this.NewGoodsListData)
        })
      }
    },
    // 商品列表---分类，地区，排序，搜索组件值
    /*
     * classifyId, 分类
     * regionId, 地区
     * areaId, 排序
     * keywords 搜索
     * PriceSorting:0 , 价格排序
     */
    GoodsTopList(classifyId, regionId, areaId, keywords, PriceSorting){
      this.ScreeningObj = {
        classifyId: classifyId,
        regionId: regionId,
        areaId: areaId,
        keywords: keywords,
        PriceSorting: PriceSorting,
      };
      this.GoodsListData =  []
      let orders = [] // 排序数组 
      let classifyIdType = '' // 分类id
      if(classifyId === 0) {
        classifyIdType = ""
      } else {
        classifyIdType = classifyId
      }
      let regionIdType = ''
      if(classifyId === 0) {
        regionIdType = ''
      } else {
        regionIdType = regionId
      }
      let DIRECTIONType = {
        fieldname: '',
        direction: ''
      }
      // 判断排序方式
      if (areaId === '') { // 初次加载时
        DIRECTIONType = {
          fieldname: 'iOrder',
          direction: 'asc'
        }
        orders.push(DIRECTIONType)
      } else if(areaId === 'iOrder') { // 默认方式
        DIRECTIONType = {
          fieldname: 'iOrder',
          direction: 'asc'
        }
        orders.push(DIRECTIONType)
      } else if(areaId === 'fSalePrice') {
        if(PriceSorting === 0) { // 如果为0，则默认排序
          DIRECTIONType = {
            fieldname: 'iOrder',
            direction: 'asc'
          }
          orders.push(DIRECTIONType)
        } else if(PriceSorting === 1)  { // 为1则升序
          DIRECTIONType = {
            fieldname: 'fSalePrice',
            direction: 'asc'
          }
          orders.push(DIRECTIONType)
        } else if(PriceSorting === 2) { // 为2则为降序
          DIRECTIONType = {
            fieldname: 'fSalePrice',
            direction: 'desc'
          }
          orders.push(DIRECTIONType)
        }
      }
      let goodData = {
          queryCondition: {
            order: orders,  // 排序方式
            pageindex: this.GoodsListPage,
            pagesize: 1000,
            where: [
              {
                fieldname: "categoryid", // 商品分类id
                valuefrom: classifyIdType,
              },
              {
                fieldname: "area_id", // 区域id
                valuefrom: regionIdType,
              },
              {
                fieldname: "keyword", // 搜索关键词
                valuefrom: keywords,
              },
              {
                fieldname: "shop_id", // 商品id
                valuefrom: this.$route.query.id,
              }
              
            ],
          },
        }
        this.$api.commit.GetProductList(goodData).then(res => {
          console.log('商品数据11111111111111111111111111111111111111111111111111111111111111111',res.data.data)
          this.getProductFavorites(res.data.data)
          if(areaId === 'fSalePrice') {
            if(PriceSorting === 0) { // 如果为0，则默认排序
              this.GoodsListData = res.data.data
              this.getProductFavorites(res.data.data)
            } else if(PriceSorting === 1)  { // 为1则升序
              this.GoodsListData = (this.GoodsListData.concat(res.data.data)).sort(this.Compare('fSalePrice'))
              this.getProductFavorites(res.data.data)
            } else if(PriceSorting === 2) { // 为2则为降序
              this.GoodsListData = (this.GoodsListData.concat(res.data.data)).sort(this.UnCompare('fSalePrice'))
              this.getProductFavorites(res.data.data)
            }
          } else {
            this.GoodsListData = this.GoodsListData.concat(res.data.data)
            this.getProductFavorites(res.data.data)
          }
          
          // this.AllGoodsListPage = res.data.totalPage
          // this.GoodsListData = this.GoodsListData.concat(res.data.data)
        })
    },
    // 去详情
    todetail(todetail) {
      console.log('去详情', todetail)
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: todetail.pid,
          iShopId: todetail.iShopId
        },
      });
    },
	//在页面离开时记录滚动位置
	beforeRouteLeave(to, from, next) {
		console.log('router.afterEach', to, from, next)
		this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
		console.log(this.scrollTop)
		next()
	},
	//进入该页面时，用之前保存的滚动位置赋值
	beforeRouteEnter(to, from, next) {
		console.log('router.afterEach', to, from, next)
		next(vm => {
			document.body.scrollTop = vm.scrollTop
		})
	}
  },
};
</script>

<style lang="scss" scoped>
	#ShopIndex {
		margin-top: 3.6rem;
		.like {
			padding: 0 16.19rem;
			margin-top: 2.19rem;
			display: flex;
			flex-direction: column;

			.goods-list {
				margin-top: 1.88rem;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.goods-item {
					width: 24%;
					height: 25.88rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 1%;
					margin-bottom: 2.38rem;
					cursor: pointer;
					background: #fff;
					padding: 1rem 0;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.goods-img {
						width: 100%;
						height: 20.94rem;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;

						img {
							width: 16rem;
							height: 16rem;
							object-fit: contain;
						}
					}

					.goods-info {
						width: 17.1rem;
						margin-top: 1.5rem;
						height: 6rem;
						display: flex;
						justify-content: space-between;
						align-content: center;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;

						.goods-info-left {
							display: flex;
							flex-direction: column;
							width: 80%;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;

							.name {
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 100%;
								display: flex;
								align-items: center;
								height: 3rem;
							}

							.price_box {
								display: flex;
								align-items: center;
								height: 3rem;

								.price {
									font-size: 1.5rem;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(243, 64, 111, 1);
								}

								.text {
									font-size: .8rem;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: #666;
									margin-left: 1rem;
									margin-top: .7rem;
								}
							}
						}

						.goods-info-right {
							display: flex;
							align-items: center;
							justify-content: center;

							.item_img {
								width: 1.5rem;
								height: 1.4rem;
							}
						}
					}
				}
			}
		}

		.more {
			font-size: 1rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 1.95rem;
			text-align: center;
			margin: 3.13rem auto;
			cursor: pointer;
		}
	}
</style>
